<template>
  <div class="head">
    <h1 class="title">
      <img src="../../assets/img/logo.png" class="logo" />
      <span>{{title}}</span>
    </h1>
    <div class="date">{{dates}}</div>
  </div>
</template>

<script>
let timer;
export default {
  props: {
    title: String
  },
  data() {
    return {
      dates: ""
    };
  },
  mounted() {
    timer = setInterval(() => {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      this.dates = `${year}年${month}月${day}日${hours}时${minutes}分${seconds}秒`;
    }, 1000);
  },
  methods: {},
  destroyed() {
    clearInterval(timer);
  }
};
</script>

<style lang="less" scoped>
.head {
  color: #fff;
  text-align: center;
  position: relative;
  background: url("../../assets/img/head_bg.png") no-repeat center center;
  .title {
    font-size: 2.2em;
    line-height: 100px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
 
  }
  .date {
    color: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 0px;
    right: 40px;
    line-height: 90px;
    padding-bottom: 10px;
    font-size: 1.5em
  }
}
</style>